<template>
	<view class="content">
		
		<view class="topBox">
			<view class="nameBox" v-for="(item,index) in orderTop" :key="index" @tap="changeTab(index)">
				<view class="name" :class="item.beThis?'nameOrange':''">{{item.name}}</view>
				<view class="nameBorder" v-if="item.beThis?'nameOrange':''"></view>
			</view>
		</view>
		
		<view class="rows" v-for="(item,index) in orderData" :key="index" v-if="item.show">
			<view class="statusBoxs">
				<image class="logo" :src="item.logo" mode=""></image>
				<view class="comName fontSize14 overflow_one">{{item.storeName}}</view>
				<uni-icons class="iconss" type="arrowright"  color="#010101" size="12"/>
				<!-- <view class="status fontSize14" v-if="item.type == 1">等待买家付款</view>
				<view class="status fontSize14" v-if="item.type == 2">待发货</view>
				<view class="status fontSize14" v-if="item.type == 3">待收货</view>
				<view class="status fontSize14 finish" v-if="item.type == 4">交易成功</view> -->
				<view class="status fontSize14">{{item.type}}</view>
			</view>
			<view class="clearBoth"></view>
			
			<view class="thingsBox" v-for="(items,indexs) in item.list" :key="indexs">
				<image class="poster" :src="items.thumb_url" mode="" @tap="topDetails(items.goods_id)"></image>
				<view class="right" @tap="topDetails(items.goods_id)">
					<view class="name overflow_two fontSize14">{{items.goods_name}}</view>
					<view class="priceBox">
						<view class="priceOne fontSemiBold overflow_one">¥{{items.price}}</view>
						<view class="priceTwo fontSemiBold">x{{items.goods_num}}</view>
					</view>
					<view class="clearBoth"></view>
					<view class="who overflow_two fontSize12">{{items.goods_attr_str}}</view>
				</view>
				<view class="clearBoth"></view>
			</view>
			
			<view class="priceBox" v-if=" item.state == 1 ">
				<!-- <view class="allPrice fontSemiBold">实付款：<text style="color:#DC582A;">￥{{item.pay}}</text></view> -->
				<view class="allPrice fontSemiBold">实付款：<text style="color:#DC582A;">￥{{item.allPrice}}</text></view>
				<view class="nums fontSize12">总计：¥{{item.allPrice}}</view>
				<view class="clearBoth"></view>
			</view>
			<view class="priceBox" v-if=" item.state == 0 ">
				<!-- <view class="allPrice fontSemiBold">需付款：<text style="color:#DC582A;">￥{{item.needPay}}</text></view> -->
				<view class="allPrice fontSemiBold">需付款：<text style="color:#DC582A;">￥{{item.allPrice}}</text></view>
				<view class="nums fontSize12">总计：¥{{item.allPrice}}</view>
				<view class="clearBoth"></view>
			</view>
			<view class="clearBoth"></view>
			<view class="typeBox">
				<view class="justBox" @tap="toDetails(0,item.ordernumber)" v-if=" item.state == 0 && item.filter == 1 ">去付款</view>
				<view class="justBox" @tap="toDetails(2,item.ordernumber)"  v-if="item.filter == 3 ">确认收货</view>
				<view class="justBox borderBlack" @tap="toDetails(3,item.ordernumber,index)" v-if=" item.state == 0 && item.filter == 1 ">取消订单</view>
				<view class="justBox" @tap="toDetails(1,item.ordernumber)" v-if=" item.filter == 2 ">提醒发货</view>
				<view class="justBox borderOrange"  v-if="item.filter == 3 ">查看物流</view>
				<view class="justBox borderBlack" @tap="toDetails(4,item.ordernumber,item.filter)"  v-if="item.filter == 4 || item.filter == 5 ">删除订单</view>
				<view class="justBox borderOrange"  @tap="toDetails(5,item.ordernumber)"  v-if="item.filter == 4 ">申请售后</view>
				<view class="clearBoth"></view>
			</view>
		</view>
		
	</view>
</template>
<style>
	.content{min-height: 100vh;background: rgb(245,245,249);}
	.content .topBox{width: 100%;display: flex;justify-content:space-around;margin-top: 20upx;padding:20upx 0;background: white;}
	.content .topBox .nameBox{}
	.content .topBox .nameBox .name{color:#000000;font-size:28upx}
	.content .topBox .nameBox .nameOrange{color:#DC582A;font-weight: bold;font-size:28upx}
	.content .topBox .nameBox .nameBorder{width: 50%;margin-left: 25%;border-radius: 20upx;margin-top: 4upx;height:6upx;background:#DC582A;}
	.content .rows{width:90%;margin-left: 5%;border-radius: 10upx;border-top:20upx solid rgb(245,245,249);padding:2.5%;position: relative;padding-top: 0;background-color: white;}
	.content .rows .logo{width:44upx;height:44upx;border-radius: 10upx;margin-top:19upx;float: left;margin-right: 20upx;}
	.content .rows .comName{color:#010101;float: left;font-weight: bold;max-width:50%}
	.content .rows .statusBoxs{width:100%;height:80upx;line-height: 80upx;}
	.content .rows .statusBoxs .time{float: left;}
	.content .rows .statusBoxs .status{float: right;color:#DC582A;font-weight: bold;}
	.content .rows .statusBoxs .finish{float: right;color:#999999 }
	.content .rows .play{width:56upx;height:56upx;position: absolute;top:35%;left:16%;z-index: 2;}
	.content .rows .poster{width:160upx;height:160upx;border-radius: 10upx;float: left;margin:10upx 0 30upx 0;margin-right: 3%;}
	.content .rows .right{width:71%;float:left;margin:10upx 0 30upx 0;}
	.content .rows .right .name{width:75%;height: 74upx;float: left;}
	.content .rows .right .priceBox{width:25%;float: left;text-align: right;position: relative;top:-10upx;}
	.content .rows .right .priceBox .priceOne{color:#333333;margin-top: 6upx;}
	.content .rows .right .priceBox .priceTwo{color:#AAAAAA;font-size: 24upx;}
	.content .rows .right .who{color:#B3B3B3;margin-top: 10upx;}
	.content .rows .right .teacherBox{width:100%;margin-top:20upx;}
	.content .rows .right .teacherBox .price{float: left;color:#000000;}
	.content .rows .priceBox{width:100%;margin-top: 10upx;}
	.content .rows .priceBox .nums{float: right;color:#AAAAAA;margin:0 40upx}
	.content .rows .priceBox .allPrice{float: right;font-size: 26upx;color:#262626;float: right;}
	.content .rows .typeBox{width:100%;margin-top: 10upx;}
	.content .rows .typeBox .justBox{float: right;font-size: 24upx;padding:10upx 30upx;border-radius: 10upx;margin-left:20upx;background: #DC582A;border-radius: 100upx;color:white}
	.content .rows .typeBox .borderBlack{border:2upx solid #262626;background: white;color:#262626}
	.content .rows .typeBox .borderOrange{border:2upx solid #DC582A;background: white;color:#DC582A}
</style>
<script>
	import Share from '@/common/wx_share.js'
	export default {
		data() {
			return {
				share:{
					title:"",
					path:'/pages/tabbar/index',
					imageUrl:'',
					desc:'',
					content:''
				},
				orderTop:[
					{name:"全部",beThis:false},
					{name:"待付款",beThis:false},
					{name:"待发货",beThis:false},
					{name:"待收货",beThis:false},
					{name:"已完成",beThis:false},
				],
				orderData:[],
				pages:1,
				indexs:0

				
				
			}
		},
		onLoad(e){
			this.orderTop[e.index].beThis = true
			if( e.index == 0 ){
				this.indexs = 6
			}else if( e.index == 1 ){
				this.indexs = 1
			}else if( e.index == 2 ){
				this.indexs = 2
			}else if( e.index == 3 ){
				this.indexs = 3
			}else if( e.index == 4 ){
				this.indexs = 4
			}
			this.AjaxLoad()
		},
		onReachBottom(){
			this.pages++
			this.AjaxLoad()
		},
		methods: {
			AjaxLoad(){
				var orderData = []
				let param={
					token:this._$userToken("userInfo").token,
					filter:this.indexs,
					page:this.pages,
				};
				this._$InitRequest.request("member_order/index", param).then(res => {
					//1店铺logo  2实付款 3需付款 4什么状态有什么按钮
					res.data.forEach( (item) =>{
						orderData.push({
							id:item.id,
							show:true,
							ordernumber:item.ordernumber,
							logo:item.logo,
							storeName:item.shop_name,
							type:item.order_zt,
							allPrice:item.total_price,
							// pay:item.total_price,
							// needPay:itemasdasd,,
							list:item.goodsinfo,
							state:item.state,
							filter:item.filter,
						})
					})
					for (var i = 0; i < orderData.length; i++){this.orderData.push( orderData[i] )}
				},error=>{})
			},
			topDetails(id){
				uni.navigateTo({
					url:"/pages_index/pages/details/details?id="+id
				})
			},
			changeTab(e){
				for (var i = 0; i < this.orderTop.length; i++) {
					this.orderTop[i].beThis = false
				}
				this.orderTop[e].beThis = true
				if( e == 0 ){
					this.indexs = 6
				}else if( e == 1 ){
					this.indexs = 1
				}else if( e == 2 ){
					this.indexs = 2
				}else if( e == 3 ){
					this.indexs = 3
				}else if( e == 4 ){
					this.indexs = 4
				}
				this.orderData = []
				this.pages = 1
				this.AjaxLoad()
			},
			toDetails(e,id,index){
				var that = this;
				if( e == 0 ){//去支付
					uni.navigateTo({
						url:"/pages_mine/pages/order_waitPay/order_waitPay?id=" + id
					})
				}else if( e == 1 ){//提醒发货
					let param={
						token:this._$userToken("userInfo").token,
						order_num:id,
					};
					that._$InitRequest.request('member_order/remind', param).then(res => {
						uni.showToast({title:res.mess,icon:"none"})
					},error=>{})
				}else if( e == 2 ){
					uni.navigateTo({
						url:"/pages_mine/pages/order_waitSure/order_waitSure?id=" + id
					})
				}else if( e == 3 ){//取消订单
					uni.showModal({
						title: '提示',
						content: '是否取消该订单',
						success: (res) => {
							if (res.confirm) {
								let param={
									token:this._$userToken("userInfo").token,
									order_num:id,
								};
								that._$InitRequest.request('member_order/quxiao', param).then(res => {
									uni.showToast({title:res.mess,icon:"none"})
									if( res.status == 200 ){
										that.orderData[index].show = false
									}
								},error=>{})
							}else if(res.cancel){}
						}
					});
				}else if( e == 4 ){//删除订单
					if( index == 5 ){
						uni.navigateTo({
							url:"/pages_mine/pages/order_waitDel/order_waitDel?id=" + id + "&hideBtn=1" + "&title=已关闭"
						})
					}else{
						uni.navigateTo({
							url:"/pages_mine/pages/order_waitDel/order_waitDel?id=" + id
						})
					}
				}else if( e == 5 ){//申请售后
					uni.navigateTo({
						// url:"/pages_mine/pages/order_PostSale/order_PostSale?id=" + id
						url:"/pages_mine/pages/order_waitSure/order_waitSure?id=" + id + "&name=申请售后"
					})
				}
			}
			
			
		}
	}
</script>
<style lang="scss" scoped>
/deep/ .uni-input-input {font-size:32upx}
/deep/ .uni-radio-input-checked{background-color:rgb(110,43,34) !important;border:2upx solid white !important}
.content .html{
  ::v-deep {
    img {
      width: 100%;
    }
  }
}
</style>